new Vue({
  el:'#app',
  data() {
    return {
      timer: null,    //定时器
      active_index: 0,    //当前下标
      active_image: '../images/10003.jpg',   //当前图片
      active_color: '#E60B09',
      size:9,  //轮播图数量
      list:[
        {
          title:'追光者',
          sub_title:'罗云熙吴倩热血拯救生命',
          image:'../images/10001.jpg',
          bg_color:'#8A7D6D'
        },
        {
          title:'我们这10年',
          sub_title:'见证新时代奋斗者',
          image:'../images/10002.jpg',
          bg_color:'#949130'
        },
        {
          title:'新一届政治委员',
          sub_title:'践行爱国主义教育',
          image:'../images/10003.jpg',
          bg_color:'#E60B09'
        },
        {
          title:'邻家诗画',
          sub_title:'最美的年华时光',
          image:'../images/10004.jpg',
          bg_color:'#101819'
        },
        {
          title:'宵夜江湖',
          sub_title:'热闹的宵市',
          image:'../images/10005.jpg',
          bg_color:'#0E0A0B'
        },
        {
          title:'我和我的新时代',
          sub_title:'把新时代写在大地',
          image:'../images/10006.png',
          bg_color:'#54A47D'
        },
        {
          title:'英雄黄继光',
          sub_title:'英雄的历史使命',
          image:'../images/10007.jpg',
          bg_color:'#67656A'
        },
        {
          title:'心动的信号',
          sub_title:'男女隔空表白',
          image:'../images/10008.jpg',
          bg_color:'#B692AC'
        },
        {
          title:'庆祝党的12大',
          sub_title:'特别节目',
          image:'../images/10009.jpg',
          bg_color:'#D10100'
        },
      ]
    }

  },
  methods: {
    // 停止播放
    stopAutoPlay() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    // banner开始播放
    startAutoPlay() {
      let _t = this
      this.timer=setInterval(() => {
        _t.active_index++
        if (_t.active_index > _t.size - 1) {
          _t.active_index=0
        }
        _t.changeBanner(_t.active_index)
      }, 3000);
    },
    // 鼠标移入切换轮播
    changeBanner(index) {
      this.stopAutoPlay();
      this.active_index=index
      this.active_image=this.list[index].image
      this.active_color = this.list[index].bg_color
      this.startAutoPlay()
    }
  },
  mounted() {
    this.startAutoPlay()
  }
})